import { PageContainer } from "@ant-design/pro-components";
import { Descriptions } from "antd";
import axios from "axios";
import moment from "moment";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
/** @import { News, NewsCategoryRoleDTO, ReactState } from "../../../types"; */

export default function NewsPreview() {
    /** @type {ReactState<NewsCategoryRoleDTO>} */
    const [newsData, setNewsData] = useState();
    const params = useParams();
    useEffect(() => {
        axios.get(`/news/${params.id}?_embed=category&_embed=role`).then((res) => setNewsData(res.data));
    }, [params.id]);
    const auditStates = ["未审核", "审核中", "已通过", "未通过"];
    const publishStates = ["未发布", "待发布", "已上线", "已下线"];
    const auditColors = ["black", "orange", "green", "red"];
    const publishColors = ["black", "orange", "green", "red"];
    let ret;
    if (newsData) {
        ret = (
            <PageContainer
                ghost
                header={{
                    title: newsData.title,
                    subTitle: newsData.category.title,
                    breadcrumb: {},
                    onBack: () => window.history.back()
                }}
                content={
                    <Descriptions column={3} style={{ marginBlockEnd: -16 }}>
                        <Descriptions.Item label="创建者">{newsData.author}</Descriptions.Item>
                        <Descriptions.Item label="创建时间">
                            {moment(newsData.createTime).format("YYYY-MM-DD HH:mm:ss")}
                        </Descriptions.Item>
                        <Descriptions.Item label="发布时间">
                            {newsData.publishTime === 0 ? "-" : moment(newsData.publishTime).format("YY-MM-DD HH:mm:ss")}
                        </Descriptions.Item>
                        <Descriptions.Item label="区域">{newsData.region}</Descriptions.Item>
                        <Descriptions.Item label="审核状态">
                            <span style={{ color: auditColors[newsData.auditState] }}>{auditStates[newsData.auditState]}</span>
                        </Descriptions.Item>
                        <Descriptions.Item label="发布状态">
                            <span style={{ color: publishColors[newsData.publishState] }}>{publishStates[newsData.publishState]}</span>
                        </Descriptions.Item>
                        <Descriptions.Item label="访问数量">{newsData.view}</Descriptions.Item>
                        <Descriptions.Item label="点赞数量">{newsData.star}</Descriptions.Item>
                        <Descriptions.Item label="评论数量">TODO</Descriptions.Item>
                    </Descriptions>
                }
                
            >
                <div dangerouslySetInnerHTML={{ __html: newsData.content }}></div>
            </PageContainer>
        );
    }
    return ret;
}
